<template>
  <!-- 催收执行页-行动区模块-外访行动区 -->
  <section class="page visit-action-area">
    <el-form ref="form" :rules="rules" :model="applyModel" label-width="88px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收对象:" prop="custType">
            <el-select v-model="applyModel.custType" @change="getAddressDetail">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData('CustType')"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关系:" prop="relationship">
            <el-select
              v-model="applyModel.relationship"
              @change="getAddressDetail"
            >
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'Relationship'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="地址类型:" prop="addressType">
            <el-select
              v-model="applyModel.addressType"
              @change="getAddressDetail"
            >
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'AddressType'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="targetName">
            <el-input v-model="applyModel.targetName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="外访地址:" prop="addressDetail">
            <el-input
              v-model="applyModel.addressDetail"
              style="width:99%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地址核实:" prop="addressStatus">
        <el-select v-model="applyModel.addressStatus">
          <el-option
            v-for="{ index, name, code } in $dict.getDictData('AddressStatus')"
            :key="index"
            :label="name"
            :value="code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="债务人情况:" prop="debtorStatus">
            <el-select v-model="applyModel.debtorStatus">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'DebtorStatus'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆情况:" prop="carStatus">
            <el-select v-model="applyModel.carStatus">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData('CarStatus')"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="还款情况:" prop="repaymentStatus">
            <el-select v-model="applyModel.repaymentStatus">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'RepaymentStatus'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风险评估:" prop="riskAssessment">
            <el-select v-model="applyModel.riskAssessment">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'RiskAssessment'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="跟进时间:" prop="followTime">
            <el-date-picker
              v-model="applyModel.followTime"
              type="date"
              placeholder="请选择日期"
              :value-format="'yyyy-MM-dd'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财产线索:" prop="propertyClues">
            <el-input v-model="applyModel.propertyClues"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="外访描述:" prop="followContent">
        <el-input
          :rows="2"
          style="width:99%"
          type="textarea"
          maxlength="500"
          show-word-limit
          v-model="applyModel.followContent"
        ></el-input>
      </el-form-item>
      <el-form-item label="个人处理意见:" prop="personalOpinions">
        <el-input
          v-model="applyModel.personalOpinions"
          :rows="1"
          style="width:99%"
          type="textarea"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="签署文件:" prop="signPaperType">
        <el-checkbox-group v-model="applyModel.signPaperType">
          <el-checkbox
            v-for="{ index, name, code } in $dict.getDictData('SignPaperType')"
            :label="code"
            :key="index"
            :value="code"
            >{{ name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="附件上传:" prop="enclosureUrls">
        <file-upload
          :fileList.sync="fileList"
          :showFileList="true"
          :listType="'text'"
          :AllowExtension="['avi', 'mp4', 'wmv', 'jpeg', 'jpg', 'png']"
        ></file-upload>
      </el-form-item>
    </el-form>
    <div style="text-align:center;">
      <el-button @click="reset">重置</el-button>
      <el-button :loading="submitLoading" @click="submit">提交</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { Dependencies } from "~/core/decorator";
import { State, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service.ts";
import { Prop, Emit, Watch } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import FileUpload from "~/components/common/file-upload.vue";
import { FileUploadService } from "~/services/file-service/file-upload.service";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    FileUpload
  }
})
export default class VisitActionArea extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(FileUploadService)
  private FileUpload: FileUploadService;

  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private otherData;
  @Prop({ required: false })
  private phoneData: any;
  private personalInfo: any = {};
  private submitLoading: boolean = false;
  private signPaperType: any = [];
  private fileList: any = [];

  private rules: any = {
    custType: [{ required: true, message: "请选择催收对象" }],
    relationship: [{ required: true, message: "请选择关系" }],
    targetName: [{ required: true, message: "请输入姓名" }],
    addressType: [{ required: true, message: "请选择地址类型" }],
    addressDetail: [{ required: true, message: "请输入外访地址" }],
    addressStatus: [{ required: true, message: "请选择地址核实" }],
    debtorStatus: [{ required: true, message: "请选择债务人情况" }],
    carStatus: [{ required: true, message: "请选择车辆情况" }],
    repaymentStatus: [{ required: true, message: "请选择还款情况" }],
    riskAssessment: [{ required: true, message: "请选择风险评估" }],
    followTime: [{ required: true, message: "请选择跟进时间" }],
    propertyClues: [{ required: true, message: "请输入财产线索" }]
  };
  private applyModel: any = {
    custType: null,
    relationship: null,
    targetName: null,
    addressType: null,
    addressDetail: null,
    addressStatus: null,
    caseId: null,
    debtorStatus: null,
    carStatus: null,
    repaymentStatus: null,
    riskAssessment: null,
    followTime: null,
    propertyClues: null,
    followContent: null,
    personalOpinions: null,
    signPaperType: [],
    enclosureUrls: []
  };

  @Emit("success")
  private emitSuccess() {
    this.submitLoading = false;
    this.$message.success("操作成功");
    this.reset();
  }

  @Watch("caseId", { immediate: true })
  private onCaseId() {
    if (this.caseId) {
      this.caseOperatorPageService.personalInfo(this.caseId).subscribe(data => {
        this.personalInfo = data;
      });
    }
  }

  @Emit("close")
  private reset() {
    const form: any = this.$refs["form"];
    form.resetFields();
    this.fileList = [];
  }
  private submit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;

      if (this.menuChannel === MENU_CHANNEL.Assist_visit) {
        this.applyModel.assistId = this.otherData.assistId;
      }

      this.applyModel.caseId = this.caseId;
      this.submitLoading = true;
      const urls: any = [];
      this.fileList.forEach(element => {
        if (element.response) {
          urls.push(element.response.id);
        }
      });
      this.applyModel.enclosureUrls = urls;
      this.caseOperatorPageService
        .addCaseFollowupRecord([CASE_CHANNEL.visit], this.applyModel)
        .subscribe(
          data => {
            this.emitSuccess();
          },
          err => {
            this.submitLoading = false;
          }
        );
    });
  }

  private onChange(val) {
    this.applyModel.targetName =
      val === "SELF" ? this.personalInfo.personalName : "";
  }

  private showAddressDetail() {
    this.applyModel.custType = this.phoneData.custType;
    this.applyModel.relationship = this.phoneData.relation;
    this.applyModel.targetName = this.phoneData.contName;
    this.applyModel.addressType = "HOUSE_ADDR";
    this.applyModel.addressDetail = this.phoneData.contAddress;
  }

  private getAddressDetail() {
    this.applyModel.caseId = this.caseId;
    if (!this.phoneData) {
      this.caseOperatorPageService
        .getPersonalContactInfo(this.applyModel)
        .subscribe(
          data => {
            if (data.id) {
              this.applyModel.custType = data.custType;
              this.applyModel.relationship = data.relation;
              this.applyModel.targetName = data.contName;
              switch (this.applyModel.addressType) {
                case "HOUSE_ADDR":
                  this.applyModel.addressDetail = data.contAddress;
                  break;
                case "IDCARD_ADDR":
                  this.applyModel.addressDetail = data.idCardAddress;
                  break;
                case "COMPANY_ADDR":
                  this.applyModel.addressDetail = data.companyAddress;
                  break;
                default:
                  this.applyModel.addressType = "HOUSE_ADDR";
                  this.applyModel.addressDetail = data.contAddress;
                  break;
              }
            } else {
              this.applyModel.targetName = null;
              this.applyModel.addressDetail = null;
            }
          },
          err => {}
        );
    }
  }
}
</script>

<style lang="less" scoped>
.page.visit-action-area {
  height: 380px;
  overflow: auto;
}
</style>
